<template>
  <div class="wrapper">
    <el-menu
      :default-active="activeNavIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleChangeNav">
      <el-menu-item v-for="(item,key) in showNav" :index="`${key+1}`" :key="item">{{item}}</el-menu-item>
    </el-menu>
    <ul class="visitor-ui" v-if="activeNavIndex === '1'">
      <li v-for="(item,index) in customerListInfo.browsing" :key="index">
        <el-row >
          <el-col :span="24">
            <p @click="onClickVisitor(item, activeNavIndex)">{{item.name}}</p>
          </el-col>
        </el-row>
      </li>
    </ul>
    <ul class="visitor-ui" v-if="activeNavIndex === '2'">
      <li v-for="(item,index) in customerListInfo.queueing" :key="index">
        <el-row>
          <el-col :span="24">
            <div @click="onClickVisitor(item, activeNavIndex)" class="flex-row">
              <div class="column-center">
                <el-avatar :size="'medium'" :src="item.avatar ? item.avatar : 'static/public/image/default_avatar.jpg'"></el-avatar>
              </div>
              <div class="flex-column">
                <p class="text-item">
                  <el-tooltip effect="dark" :content="item.visitor.address" placement="right-start">
                    <span class="name-text">{{item.name}}</span>
                  </el-tooltip>
                </p>
                <p class="text-item text-oneline">
                  <span class="desc-text">{{item.visitor.address}}</span>
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </li>
    </ul>
    <ul class="visitor-ui"  v-if="activeNavIndex === '3'">
      <li v-for="(item,index) in customerListInfo.chatting" :key="index">
        <el-row>
          <el-col :span="24">
            <div @click="onClickVisitor(item, activeNavIndex)" class="flex-row">
              <div class="column-center">
                <el-badge v-if="item.extras.unread > 0" :value="item.extras.unread" class="item" type="primary">
                  <el-avatar :size="'medium'" :src="item.avatar ? item.avatar : 'static/public/image/default_avatar.jpg'"></el-avatar>
                </el-badge>
                <el-avatar v-if="item.extras.unread === 0" :size="'medium'" :src="item.avatar ? item.avatar : 'static/public/image/default_avatar.jpg'"></el-avatar>
              </div>
              <div class="flex-column">
                <p class="text-item">
                  <el-tooltip effect="dark" :content="item.visitor.address" placement="right-start">
                     <span class="name-text">{{item.name}}</span>
                  </el-tooltip>
                </p>
                <p class="text-item text-oneline">
                  <span class="desc-text">{{getLastMessageText(item.extras.lastMessage)}}</span>
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'JwChat-visitortalk',
  props: {
    customerListInfo: Object,
    config: Object
  },
  data () {
    return {
      activeNavIndex: '3'
    }
  },
  computed: {
    showNav () {
      return ['浏览中', '排队中', '沟通中'];
    }
  },
  methods: {
    getLastMessageText (lastMessage) {
      if(!lastMessage){
        return '';
      }
      if(lastMessage.hasOwnProperty('body')){
        if(lastMessage.type === 'FILE'){
          return '[文件信息]';
        }
        else if(lastMessage.type === 'VIDEO'){
          return '[视频信息]';
        }
        else if(lastMessage.type === 'IMAGE'){
          return '[图片信息]';
        }
        else if(lastMessage.type === 'AUDIO'){
          return '[音频信息]';
        }
        else if(lastMessage.type === 'TEXT'){
          if(lastMessage.body.hasOwnProperty('body')){
            return lastMessage.body.body;
          }
          else {
            return '[您有新的信息]'
          }
        }
        else {
          return '[您有新的信息]';
        }

      }
      return '';
    },

    handleChangeNav (index) {
      this.activeNavIndex = index
      this.emit({ key: 'navIndex', value: index })
    },
    onClickVisitor(item, activeNavIndex){
      // console.log(`click:${JSON.stringify(item)}`);
      let group = '';
      if(activeNavIndex === '1'){
        group = 'browsing'
      }
      if(activeNavIndex === '2'){
        group = 'queueing'
      }
      if(activeNavIndex === '3'){
        group = 'chatting'
      }
      this.$emit('onClickVisitor', {
        group: group,
        index: activeNavIndex,
        data: item
      })
    },
    emit (play) {
      this.$emit('event', play)
    }
  }
}
</script>
<style scoped>
.el-menu-demo {
  width: 100%;
  height: 42px;
  line-height: 40px;
  display: flex;
  position: relative;
  top: 18px;
}
.el-menu-demo > * {
  height: unset;
  line-height: unset;
  width: 40%;
  padding: 0;
  text-align: center;
  box-shadow: none;
}
.wrapper {
  padding: 0;
  height: 100%;
  width: 0;
  max-width: 100%;
  min-width: 220px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
ul {

  padding: 0;
  list-style: none;
  height: 84%;
  overflow: auto;
}

.visitor-ui {
  margin-top: 18px;
}

li {
  padding: 0.5rem;
  padding-right: 0;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
  margin: 0.2rem 0;
}
li p {
  margin: 0;
  /* width: 95%; */
}
li:hover i {
  display: inline-block;
}
li i {
  /* display: none; */
  margin: 0 0.05rem;
}
i:hover {
  color: #409eff;
  cursor: pointer;
}

.item {
  font-size: 4px;
  margin-left: -4px;
  margin-top: 4px;
}

/* 垂直居中 */
.column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.text-item {
  margin-left: 12px;
}

.name-text {
  font-size: 14px;
}

.desc-text {
  font-size: 12px;
  color: #777;
}

/* 单行文字 */
.text-oneline{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

</style>
